<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header-text">就业职通车管理系统</div>
      <div class="form-wrapper">
        <input v-model="user" required type="text" placeholder="请输入用户名" class="input-item">
        <input v-model="password" required type="password" placeholder="请输入用户密码" class="input-item">
        <div @click="login" class="btn">登录</div>
      </div>
    </div>()
  </div>
</template>

<script setup>
import { inject, ref } from 'vue'
import useUserStore from '@/store/index.js'
import { useRouter } from "vue-router"
const router = useRouter()
const store = useUserStore();
const $axios = inject('$axios')
const $root = inject('$root')
let user = ref("")
let password = ref("")

/**
 * 登录
 */
const login = () => {
  $axios.post($root + `/admin/login/`, {
    username: user.value,
    password: password.value
  })
      .then(r => {
        if (r.data.code=='200') {
          setToken( r.data.data,user.value)
          ElMessage({
            message: '登录成功',
            type: 'success',
          })
        }
        else{
          ElMessage.error('账户名或密码错误')
        }
      })
}
  /**
   * 设置token
   */
const setToken = (token,username) => {
    store.addUserData(token,username)
    user.value=""
    password.value=""
    router.push('/home')
}

</script>
<style scoped>
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-wrapper {
  background: rgba(252, 255, 255, 1);
  width: 340px;
  height: 480px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header-text {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.header-text::before {
  content: "";
  width: 4px;
  height: 36px;
  background: rgb(113, 142, 255);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}
.input-item::placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 50px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
